import Vue from 'vue'
import MessageBox from './MessageBox.vue'

export const messageBox = (() => {

  return (opts) => {
    let defaults = {
      title: '',
      content: '',
      cancle: '',
      ok: '',
      handleCancle: null,
      handleOk: null
    }
  
    let MyComponent = Vue.extend(MessageBox);
    
    for(let attr in opts) {
      defaults[attr] = opts[attr]
    }

    let vm = new MyComponent({
      el: document.createElement('div'),
      data: {
        title: defaults.title,
        content: defaults.content,
        cancle: defaults.cancle,
        ok: defaults.ok,
      },
      methods: {
        handleCancle() {
          defaults.handleCancle && defaults.handleCancle.call(this)
          document.body.removeChild(vm.$el)
        },
        handleOk() {
          defaults.handleOk && defaults.handleOk.call(this)
          document.body.removeChild(vm.$el)
        }
      }
    })

    document.body.appendChild(vm.$el)
  }
})()